<template>
  <fragment>
    <template v-for="item in visibleRoutes(routes)">
      <el-menu-item :alt="item.path" :id="$Vcli.isHttp(item.path) ?
      `iframe${item.componentName}` : ''" v-if="item.children.length === 0"
                    :index="$Vcli.isHttp(item.path) ? `/iframe/${item.componentName}`
                    : item.path" :key="item.path">
        <i :class="item.icon"></i>
        <span slot="title">{{item.text}}</span>
      </el-menu-item>
      <el-submenu v-else :index="item.path" :key="item.path">
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{item.text}}</span>
        </template>
        <template v-for="item in visibleRoutes(item.children)">
          <sidebar-item class="nest-menu" v-if="item.children && item.children.length > 0"
                        :routes="[item]" :key="item.path"></sidebar-item>
          <el-menu-item :alt="item.path" :id="$Vcli.isHttp(item.path) ?
          `iframe${item.componentName}` : ''" v-else :index="$Vcli.isHttp(item.path) ?
          `/iframe/${item.componentName}`: item.path" :key="item.path">
            <i :class="item.icon"></i>
            <span slot="title">{{item.text}}</span>
          </el-menu-item>
        </template>
      </el-submenu>
    </template>
  </fragment>
</template>

<script>
export default {
  name: 'SidebarItem',
  data() {
    return {
      loading: false,
    };
  },
  computed: {
    visibleRoutes() {
      return function (routes) {
        return routes.filter((route) => route.visible);
      };
    },
  },
  props: {
    routes: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
